import { Component } from 'react'

// 创建类组件(优势: hooks之前功能十分强大, 劣势: 写法复杂)
class Hello extends Component {
  // 提供组件zhuangtai
  state = {
    userObj: {
      name: '窦傲杰',
      age: 90,
    },
  }

  changeName = () => {
    // this.state.userObj.name = '张小三'

    const newUserObj = {
      ...this.state.userObj,
      name: '你是谁',
    }

    this.setState({
      // 尤其是复杂类型, 需要拷贝!!! => 保证数据的不可变性(追踪数据的变化)
      userObj: newUserObj,
    })
  }

  render() {
    // this=>组件实例
    const { userObj } = this.state
    return (
      <div>
        <h3>不能直接修改状态!!!</h3>
        <p>姓名:{userObj.name}</p>
        <p>年龄:{userObj.age}</p>
        <button onClick={this.changeName}>修改姓名</button>
      </div>
    )
  }
}

export default Hello
